<!--
 * 文件描述:
 * @author Lz on 2020/6/30
 -->
<template>
  <div>

    <div class="out">
      <div style="height: 100%;background-color: #8c939d;" class="innerBox">
        <div style="height: 300px; width: 100px; background-color: #c2e7b0;" class="box1"></div>
        <div  style="width: 100px;flex: 1;background-color: #dd6161;" class="box2"></div>
      </div>
    </div>

    <br>
    <a href="javascript:void(alert(1))" onclick="alert(2)">测试谁先执行</a>
    <a href="javascript:void(alert(1))" onclick="event.preventDefault()">测试谁先执行</a>


    <el-button @click="msg = '000'" type="success">按钮</el-button>
    <el-button @click="doSomething" type="success">按钮</el-button>

    <!--once：只渲染一次(只在渲染的时候),主要用于性能优化，不要过度使用。-->
    <div v-once>{{ msg}}</div>
    <div>{{ msg }}</div>


    <!--v-html:只对可信内容使用html插值，绝不要对用户提供的内容使用插值-->
    <div>
      <span v-html="htmlData"></span>
    </div>


    <!--html原生的熟悉,只要存在就意味着true,-->
    <!--如果是属性是null、undefined或false，这个属性不会被渲染出来-->
    <button :disabled="true">哈哈</button>

    <!--属性绑定里使用表达式只能使用vue白名单里设置的JS方法,自己定义的一些全局JS方法不能使用-->
    <!--'Infinity,undefined,NaN,isFinite,isNaN,'-->
    <!--'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +-->
    <!--'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +-->
    <!--'require'-->
    <div :class="'list-' + 'ccc'">111</div>

    <br>
    <!--2.6新增动态参数，可以用方括号把定义一个html的熟悉-->
    <!--<a :[attrbuteName]="url">标签</a>-->
    <a @[event]="doSomething"> ... </a>  <!--不生效-->

    <!--计算属性set/get-->
    <a href="">{{ name }}</a>
    <br>

    <!--watch防抖-->

    <div id="watch-example">
      <p>
        Ask a yes/no question:
        <input v-model="question">
      </p>
      <p>{{ answer }}</p>
    </div>

    <!--class绑定成计算属性-->
    <div :class="classObj">阿哈哈哈哈~</div>

    <!--在数组对语法中使用对象语法-->
    <div v-bind:class="[{ active: isActive }, errorClass]">数组+对象语法</div>


    <!--当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。-->
    <not-found class="notFound"></not-found>

    <!--对象语法常常结合返回(一个对象)或者使用计算属性返回。-->
    <!--当然:style也可以使用数组 :style="[ color:myColor]"-->
    <h1 :style="{ color:myColor}">行内样式style </h1>


    <!--在 <template> 元素上使用 v-if 条件渲染分组-->

    <template v-if="'ok'">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>


    <!--用 key 管理可复用的元素-->
    <el-button type="warning" @click="type= !type"> 切换登录</el-button>
    <br>
    <template v-if="type">
      <label>姓名</label>  <!--因为两个模板使用了相同的元素，如果不加key,2个template不会重新渲染的-->
      <input placeholder="username" type="text" key="username">
    </template>
    <template v-else>
      <label>年龄</label>
      <input placeholder="age" type="text" key="age">
    </template>

    <!--v-show 不支持 <template> 元素，也不支持 v-else。-->
    <div v-show="type"> 看不到我啊</div>

    <!--为什么v-if和v-for不能在一起用-->
    <!-- - v-for 比 v-if 具有更高的优先因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。-->
    <!--https://vuejs.bootcss.com/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81-->

    <!--v-for-->
    <!--你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：-->
    <!--v-for 使用key是为了保证循环渲染的顺序正确，因为虚拟dom的算法会根据key来排列
    自动修复，处理key不存在的元素，
    -->

    <el-button @click="replaceArray">更换数组数据</el-button>
    <br>
    <!--this.items[1] = {message: 'Foo~~~~~~~~~~'} 不会更新 不是响应式的-->
    <div v-for="(item,index) of items" :key="index"> {{ item.message}}</div>

    <div>{{ userObj }}</div>

    <!--template啥都没-->
    <ul>
      <template v-for="item in items">
        <li>{{ item }}</li>
      </template>
    </ul>


  </div>
</template>

<script>

  import NotFound from "@/pages/NotFound";

  export default {
    name: "Message",
    components: {NotFound},
    data() {
      return {
        msg: 998,
        htmlData: `<h1>我是H1的html</h1>`,
        flag: undefined,
        attrbuteName: 'href',
        url: 'www.img.com/1',
        event: 'onkeydown',
        question: '',
        answer: 'I cannot give you an answer until you ask a question!',
        isActive: true,
        errorClass: 'errorClass',
        myColor: 'blue',
        type: true,
        items: [
          {message: 'Foo'},
          {message: 'Bar'}
        ],
        userObj: {
          name: '阿狸'
        }
      }
    },
    watch: {
      question(newVal) {
        this.answer = '等待数据...'
        this.getAnswer();
      }
    },
    created() {
      this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
    },
    methods: {
      onsubmit(e) {
        console.log(e)
      },
      doSomething() {
        this.name = 'set name';
      },
      getAnswer: function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        this.answer = 'Thinking...'
        var vm = this;
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      replaceArray() {

        // 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。


        // this.items[1] = {message: 'Foo~~~~~~~~~~'}
        // this.$set(this.items,1,{message: 'Foo~~~~~~~~~~'})
        // 或者使用splice 方法
        this.items.splice(1, 1, {message: 'Foo~~~~~~~~~~'})

        // 给对象加属性这也不是响应式的
        // this.userObj.c = 'xiaoli'
        // 但是赋值是可以的
        // this.userObj = {
        //   name:'ali',
        //   c:'a'
        // }
        this.$set(this.userObj, 'ccc', 'xxxxxx');
      }
    },
    computed: {
      name: {
        get() {
          return this.event;
        },
        set(e) {
          // 给name赋值也就是执行name的set方法;
          this.event = e;
        }
      },
      classObj() {
        return {
          attribute1: '后面可以写一写判断什么的',
          attribute2: '属性2'
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

  .attribute1 {
    color: #3a8ee6;
  }

  .attribute2 {
    color: coral;
  }

  .out {
    height: 600px;
    width: 300px;
    background-color: #fab6b6;
  }
  .innerBox{
    display: flex;
    flex-flow: column nowrap;
  }
</style>
